<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>元素倒影（动态过冲）</title>
        <style>
            body {
                margin: 0;
                background: #000;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                perspective: 1000px;
            }

            .card-container {
                position: relative;
                width: 300px;
                height: 300px;
                transform-style: preserve-3d;
                animation: rotate-container 15s infinite linear;
                animation-play-state: paused;
                transform: rotateY(0deg);
            }

            .card-container:hover {
                animation-play-state: paused;
            }

            /* 整体容器旋转的关键帧动画 */
            @keyframes rotate-container {
                0% {
                    transform: rotateY(0deg);
                }

                100% {
                    transform: rotateY(360deg);
                }
            }

            .card {
                position: absolute;
                width: 200px;
                height: 260px;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -130px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
                overflow: hidden;
                opacity: 0;
                transform-style: preserve-3d;
                backface-visibility: hidden;
                -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.8));
            }

            .card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                border-radius: 8px;
                transform: rotateY(var(--card-face-rotation, 0deg));
                backface-visibility: hidden;

            }

            /* 单张卡片入场和展开的关键帧动画 */
            @keyframes card-reveal-and-move {
                0% {
                    opacity: 0;
                    transform: translateZ(0) rotateY(0deg);

                }

                5% {
                    opacity: 1;
                    transform: translateZ(0) rotateY(0deg);
                }

                50% {
                    opacity: 1;
                    transform: rotateY(var(--final-card-angle)) translateZ(var(--overshoot-z-distance)) rotateY(var(--card-face-rotation));
                }

                100% {
                    opacity: 1;
                    transform: rotateY(var(--final-card-angle)) translateZ(var(--final-card-z-distance)) rotateY(var(--card-face-rotation));
                }
            }
        </style>
    </head>

    <body>
        <div class="card-container" id="container">
            <div class="card"><img src="../public/img/1.jpg" alt="Card 1"></div>
            <div class="card"><img src="../public/img/2.jpg" alt="Card 2"></div>
            <div class="card"><img src="../public/img/3.jpg" alt="Card 3"></div>
            <div class="card"><img src="../public/img/4.jpg" alt="Card 4"></div>
            <div class="card"><img src="../public/img/5.jpg" alt="Card 5"></div>
            <div class="card"><img src="../public/img/6.jpg" alt="Card 6"></div>
        </div>

        <script>
            const container = document.getElementById('container');
            const cards = document.querySelectorAll('.card');
            const cardCount = cards.length;
            const radius = 300;
            const maxOvershootAmount = 100;
            const minOvershootAmount = 0;
            const singleCardAnimationDuration = 2.5;
            const totalDeploymentTime = 3.5; /* 所有卡片完成展开动画的总时长 (秒) */

            // 计算派生值
            const angleStep = 360 / cardCount; /* 每张卡片在圆周上占用的角度 */
            const delayBetweenCards = totalDeploymentTime / cardCount; /* 每张卡片动画启动之间的延迟 (秒) */

            cards.forEach((card, index) => {
                // 计算每张卡片在圆环上的最终角度。
                // 0度是正前方。index 0 对应 0度，index 1 对应 angleStep 等，顺时针排列。
                const finalCardAngle = index * angleStep;

                // 根据卡片角度动态计算“过冲”量。
                // 使用 Math.cos() 将角度映射到 [-1, 1] 范围，其中 0deg -> 1, 180deg -> -1。
                // 然后将这个 [-1, 1] 的值线性映射到 [minOvershootAmount, maxOvershootAmount]。
                const angleInRadians = finalCardAngle * Math.PI / 180;
                const cosValue = Math.cos(angleInRadians); // 0deg -> 1, 90deg -> 0, 180deg -> -1

                // 归一化 cosValue 从 [-1, 1] 到 [0, 1]
                const normalizedCos = (cosValue + 1) / 2; // 0deg -> 1, 90deg -> 0.5, 180deg -> 0

                // 线性插值计算动态过冲量
                const dynamicOvershootAmount = minOvershootAmount + (maxOvershootAmount - minOvershootAmount) *
                    normalizedCos;

                // 设置CSS变量，供卡片动画和定位使用
                card.style.setProperty('--final-card-angle', `${finalCardAngle}deg`);
                card.style.setProperty('--final-card-z-distance', `${radius}px`);
                card.style.setProperty('--overshoot-z-distance',
                    `${dynamicOvershootAmount + radius}px`); // 过冲距离是半径+过冲量
                // 设置图片内容的反向旋转，确保图片始终面向观察者
                card.style.setProperty('--card-face-rotation', `calc(${finalCardAngle}deg * -1)`);

                // 应用卡片自身的入场动画
                card.style.animation =
                    `card-reveal-and-move ${singleCardAnimationDuration}s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards`;
                // 动画延迟：所有卡片按索引顺序启动
                card.style.animationDelay = `${index * delayBetweenCards}s`;
            });

            /* 计算整体容器旋转动画的启动时间。
               它应该在最后一个卡片（index cardCount - 1）完成其展开动画之后立即启动。
            */
            let delayBeforeContainerRotate = 0;
            if (cardCount > 0) {
                delayBeforeContainerRotate = (cardCount - 1) * delayBetweenCards + singleCardAnimationDuration;
            } else {
                // 如果没有卡片，则没有动画，容器旋转立即开始（虽然此时没有东西可转）
                delayBeforeContainerRotate = 0.1;
            }

            /* 指定延迟后启动容器的持续旋转动画 */
            setTimeout(() => {
                if (cardCount > 0) {
                    /* 确保有卡片时才启动旋转 */
                    container.style.animationPlayState = 'running'; /* 启动整体旋转动画 */
                }
            }, delayBeforeContainerRotate * 1000); /* 将秒转换为毫秒，因为setTimeout使用毫秒 */
        </script>
    </body>

</html>